<template>
  <div class="NocheckTree">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      style="margin-bottom: 10px;"
      size="small">
    </el-input>
      <!-- 树组件 -->
      <div class="treebox">
        <el-tree
          :props="props"
          :load="loadNode"
          :highlight-current="true"
          lazy
          node-key="id"
          :filter-node-method="filterNode"
          show-checkbox
          :default-checked-keys="checkarr"
          @check="handClick"
          ref="tree"
          >
          <template slot-scope="{ node, data }">
            <span :style="{'font-size':'14px',}">
               <!-- <img
              :src="'data:image/png;base64,' + data.iconBase64"
              style="
                width: 16px;
                height: 16px;
                margin-right: 5px;
                vertical-align: bottom;"/> -->
                 {{ node.label }}</span>
          </template>
        </el-tree>
      </div>
  </div>
</template>

<script>
import {getfuandlibianapi} from '@/api/Microgrid/Statistics/MicPerformance'
import {getKeywordListApi} from '@/api/Ledger'
import { getgenjiedianapi, getzijidianapi } from '@/api/monitor'
export default {
  name: 'CallPoliceNocheckTree',

  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      filterText: '',
      array: [],
      checkarr:[]
    };
  },

  mounted() {

  },

  methods: {
    handClick(val) {
      const array = this.$refs.tree.getCheckedNodes(false, true)
      if (array.length) {
        this.$emit('handleNodeClicks',array)
      } else {
        this.$emit('deletelist')
      }
    },
    // 树节点搜索
    async querySearch(queryString, cb) {
      const res = await getKeywordListApi({ name: queryString })
      const restaurants = res.data.list
      cb(restaurants)
      // 调用 callback 返回建议列表的数据
    },
    // 搜索选择
    handleSelect (item) {
      const newarr=item.pathId.split(',')
      for (let i = 0;i<newarr.length;i++) {
        if (newarr[i]) {
          this.array.push(newarr[i])
        }
      }
      function getgaoliang(that) {
        let node = that.$refs.tree.getNode(item);
        if (node) {
          that.$refs.tree.setCurrentKey(item.id);
          that.handClick(node.data)
        } else {
          setTimeout(() => {
            getgaoliang(that)
          }, 500);
        }
        }
      getgaoliang(this)
        this.handClick(item)
    },
    // 设备树懒加载
    async loadNode(node, resolve) {
      const { data: { list } } = await getfuandlibianapi()
      if (node.level == 0) { // 初始的级数（最顶层）
        this.checkarr.push(list[0].id)
        resolve(list)
         return this.handClick()
      }
      if (node.level > 0) {
        return resolve([])
      }
    },
    // 树节点过滤
    filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      }
  },
  watch: {
    filterText(val) {
        this.$refs.tree.filter(val);
      }
  }
};
</script>

<style scoped>
.NocheckTree{
  height: 100%;
  .treebox{
    height: 95%;
    overflow: auto;
  }
}
</style>